:root {
  .common-pagination-box {
    margin-top: 16px;

    .ant-pagination.common-pagination {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: var(--tipsColor);

      .ant-pagination-total-text {
        margin-right: 0;
      }

      .ant-pagination-item-link {
        color: #4e5969;
        font-size: 10px;
      }

      .ant-pagination-disabled {
        .ant-pagination-item-link {
          color: var(--disabledColor);
        }
      }

      .ant-pagination-item {
        a {
          line-height: 32px;
          width: 32px;
          height: 32px;
          color: var(--colorText4);
          border-radius: 2px 2px 2px 2px;
          border: none;
        }

        &.ant-pagination-item-active {
          font-weight: normal;
          background: #e8f3ff;
          border: none;
          a {
            color: var(--colorPrimary);
          }
        }
      }

      .ant-pagination-item-ellipsis {
        overflow: hidden;

        &::before {
          content: "\002e\002e\002e";
          width: 32px;
          display: inline-block;
          color: #4e5969;
          font-weight: 700;
        }
      }

      .total-box {
        display: flex;

        .total {
          line-height: 32px;
          color: var(--tipsColor);
        }
      }
    }

    .size-change-box {
      color: #1d2129;
      margin: 0 24px;

      .size-change-select {
        width: 60px;
        margin: 0 6px;

        .ant-select-selector {
          width: 100%;
          padding: 0 10px;
          height: 32px;
          background: #f7f8fa;
          border-radius: 2px 2px 2px 2px;
          border: none;

          .ant-select-selection-item {
            padding-right: 12px;
            color: #1d2129;
            height: 100%;
          }
        }

        .ant-select-arrow {
          color: #1d2129;
          font-size: 9px;
          height: 9px;
          margin-top: -4px;
        }
      }
    }
  }
}
